<!doctype html>
<html>

<head>
		<meta charset="utf-8">
		<title>报名表单填写</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet"  type="text/css" href="css/iconfont.css">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
	
		<style>
			* {
			    touch-action: pan-y;
			}
			.mui-control-content {
				background-color: white;
				min-height: 50rem;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{
				background-color:#ff9400;
			}
			.mui-table-view .mui-media-object{
				height: 80px;
				    max-width: 110px;
			}
			.mui-bar-nav{
					background-color: #e94709;
			}
			.top-return {
			position: absolute;
			    width: 10%;
				top: 0.1875rem;			
					}
					.top-return img{
					    width: 75%;					
							}
			.mui-bar-nav .mui-title{
					color: #FFFFFF;
			}
			
			.top-logo {
			position: absolute;
			    width: 10%;
				left: 28%;
				top: 0.1875rem;			
					}
					.top-logo img{
					    width: 90%;					
							}
			.top-menu {
			position: absolute;
				width: 10%;
				right: 5%;
				top: 0.1875rem;			
					}
					.top-menu img{
						 width: 75%;					
							}
					/* 公共部分end */
			.mui-table-view .mui-media, .mui-table-view .mui-media-body{
				line-height: 2rem;
			}
			.mui-slider-indicator.mui-segmented-control .mui-control-item {
				border-left:1px solid #c1c1c1 ;
				border-bottom:1px solid #c1c1c1 ;
				padding: 1px;
				color: #585858;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom:3px solid #e94709 ;
				color: #585858;
			}
			.addtime{
				padding-top: 10px;
				font-size: 10px;
			}
			.mui-table-view .mui-media-object.mui-pull-left{
				    margin-right: 25px;
			}
			.mui-content>.mui-table-view:first-child{
				margin: 0;
			}
			.mui-content ul{
				height: 6.5rem;
			}
			
			.entry-pro {
				font-weight: 520;
				font-size: 15px;
				color: #000000;
				background-color: #FFFFFF;
				padding: 10px 0 1px 5%;
				
			}
			.entry-message{
				font-weight: 520;
				font-size: 15px;
				color: #000000;
				background-color: #FFFFFF;
				padding: 10px 0 1px 5%;
				
				height: 30rem;
			}
			.entry-message input{
				height: 30px;
			}
			.entry-message p{
				margin-bottom: 1px;
			}
			.entry-message input::-webkit-input-placeholder{			
			font-size:14px;	
			color: #bcbcbc;
			}
			.entry-select{
				position: absolute;
				width: 95%;
				height: 4%;
				border: 1px solid #bcbcbc;
				margin-bottom: 10px;
			}
			.mui-btn-block{
				font-size: 14px;
				margin: 0;
				padding: 0;
				padding-left: 4%;
				line-height: 25px;
				color: #000000;
			}
			.mui-btn-block option:first-child{
				font-size: 14px;
				margin: 0;
				padding: 0;
				color: #bcbcbc;
			}
		</style>
		<!-- 公共头部start -->
		<header class="mui-bar mui-bar-nav">
			<a class="top-return mui-action-back"><img src="images/return.png" ></a>
			<a class="top-logo"><img src="images/logo.png" ></a>
			<h1 class="mui-title">	
					Aitimt 爱计时</h1>
			<a href="#popover" id="openPopover" class="top-menu" ><img src="images/menu.png" ></a>
			<div id="popover" class="mui-popover">
			  <ul class="mui-table-view">
			    <li class="mui-table-view-cell"><a href="#">Item1</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item2</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item3</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item4</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item5</a></li>
			  </ul>
			</div>
		</header>
		<!-- 公共头部end -->
		<div class="mui-content">
			<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
								<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
								<div class="mui-media-body">
									<h4 style="color: #595757;margin-top: 25px;">2020泰国清迈马拉松</h4>
									<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
									<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
								</div>
						</li>											
					</ul>
			<div style="font-size: 15px;color: #e94709;margin-left: 5%;font-size: 520;" >
				报名项目
			</div>
			<div class="entry-pro">
				<p>报名项目:三公里(项目一)</p>
				<p>报名费用:免费</p>
			</div>
			<div style="font-size: 15px;color: #e94709;margin-left: 5%;font-size: 520;" >
				报名信息
			</div>
			<div class="entry-message">
				<p>常用报名人选择:爱计时</p>
				<p>姓名*:</p>
				<input type="text" name="name" placeholder="请输入姓名" id="name" value="" />
				<p>手机号*:</p>
				<input type="text" name="phone" placeholder="请输入手机号" id="phone" value="" />
				<p>性别*:</p>
				<div class="entry-select">
					<select class="mui-btn mui-btn-block" >
						<span class="mui-icon mui-icon-eye"></span>
										<option value="">请选择性别</option>
										<option value="man">男</option>
										<option value="woman">女</option>
									</select>
								<span class="mui-icon mui-icon-arrowdown" style="position: absolute;top: 0;right: 5%;"></span>	
				</div>
				
				<p style="margin-top: 30px;">证件类型*:</p>
				<div class="entry-select">
					<select class="mui-btn mui-btn-block" >
						<span class="mui-icon mui-icon-eye"></span>
										<option value="">请选择证件类型</option>
										<option value="man">身份证</option>
										<option value="woman">港澳通行证</option>
									</select>
								<span class="mui-icon mui-icon-arrowdown" style="position: absolute;top: 0;right: 5%;"></span>	
				</div>
				<p style="margin-top: 30px;">证件号码*:</p>
				<input type="text" name="code" placeholder="请输入证件号码" id="code" value="" />
				<p>联系邮箱*:</p>
				<input type="text" name="email" placeholder="请输入联系邮箱" id="email" value="" />
				<p style="font-size: 10px;"><input name="checkbox" type="checkbox">我已阅读并接受<爱计时参赛条款>和<主办方/组委会声明></p>
			</div>	
		</div>
		<!-- 公共底部start -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active " style="background: #e94709;color: #FFFFFF;" href="pay.html">
				<span class="mui-tab-label">下一步</span>
			</a>	
		</nav>
		<!-- 公共底部end -->
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui('.mui-bar').on('tap','a',function(){
				document.location.href=this.href;
			})
		</script>
	
	</body>
	
</html>
